<template>
  <el-affix>
    <el-page-header title="网盘" icon="HomeFilled" class="header" @back="onBack">
      <template #content>
        <el-dropdown style="padding:3px;">
          <span class="el-dropdown-link">
            当前目录:{{ title }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="open(true)">
                新建文件夹<el-icon class="el-icon--right">
                  <Folder />
                </el-icon>
              </el-dropdown-item>
              <el-dropdown-item @click="open(false)"> 修改文件夹名<el-icon class="el-icon--right">
                  <Folder />
                </el-icon>
              </el-dropdown-item>
              <el-dropdown-item @click="moveDir"> 移动目录<el-icon class="el-icon--right">
                  <Position />
                </el-icon>
              </el-dropdown-item>
              <el-dropdown-item @click="refreshDir"> 刷新<el-icon class="el-icon--right">
                  <Refresh />
                </el-icon>
              </el-dropdown-item>
              <el-dropdown-item @click="clearDir">
                <div class="delete">
                  清空目录<el-icon class="el-icon--right">
                    <Delete />
                  </el-icon>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button size="small" type="primary" @click='drawer = !drawer'>打开目录</el-button>
          <el-button size="small" type="primary" @click='moveFiles'>移动文件</el-button>
          <template v-if="!props.hasClose">
            <el-button size="small" @click="logout">登出</el-button>
          </template>
        </div>
      </template>
    </el-page-header>
  </el-affix>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { createThumbnail } from '@/utils/image.js';
import http, { clearCache } from '@/utils/axios.js';

import useDirStore from "@/stores/dir";
import useFilesStore from '@/stores/files';
import { storeToRefs } from 'pinia';
const dirStore = useDirStore();
const { dirList, treeDate } = storeToRefs(dirStore);
const filesStore = useFilesStore();
const { getDirFiles } = filesStore;

const router = useRouter();
const drawer = defineModel('drawer');//侧边栏是否打开
const page = defineModel('page'); //页码
const emit = defineEmits(['moveDir', 'moveFiles'])//冒泡事件
const props = defineProps({
  dirId: {
    type: Number,
    default: 0
  },
  hasClose: {
    type: Boolean,
    default: false
  }
});

// 选择目录对象
const clickDir = computed(() => {
  return dirList.value.find(item => {
    return item.id === props.dirId
  }) || {}
});
// 头部目录文件名
const title = computed(() => {

  const t = clickDir.value.title || ''
  if (!t) {
    return '';
  }
  return t.length > 10 ? t.substr(0, 10) : t;
});

//移动目录 
const moveDir = function () {
  if (props.dirId === 0) {
    return ElMessage('根目录不能移动')
  }
  emit('moveDir')
};
//移动文件
const moveFiles = function () {
  emit('moveFiles')
};
//刷新当前文件夹
function refreshDir() {
  page.value = 1;
  const pid = props.dirId;
  getDirFiles(props.dirId, { is_count: 1 }, true);
}

// 新建目录或修改目录
function open(insert) {
  if (!insert && !props.dirId) {
    return ElMessage({
      type: 'success',
      message: '末选择目录',
    })
  }

  const title = insert ? '新建文件' : '修改文件名';
  ElMessageBox.prompt('请输出文件名', title, {
    confirmButtonText: '提交',
    cancelButtonText: '取消'
  })
    .then(({ value }) => {
      if (!value) {
        return
      }
      if (insert) {
        dirStore.insertDir(value, props.dirId)
      } else {
        dirStore.renameDir(value, props.dirId)
      }
    })
    .catch((err) => { })
}
//清空目录
function clearDir() {
  const id = props.dirId;
  const min = 1000;
  const max = 9999;
  const code = Math.floor(Math.random() * (max - min + 1)) + min;
  ElMessageBox.prompt(
    '是否清空目录下文件（不包含文件夹）\n 请输入验证码：' + code,
    '清空目录',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      inputPattern: /\d{4}/
    }
  )
    .then(({ value }) => {
      if (value * 1 === code) {
        clearDirhandle(id * 1);
      } else {
        ElMessage({
          type: 'warning',
          message: '验证码输入错误',
        })
      }
    })
    .catch(() => {
    })
}
//删除目录下文件
function clearDirhandle(id) {
  http.post('app/pan/dir/clear', { id }).then(res => {
    ElMessage({
      type: 'success',
      message: '文件正在清空中，请稍后刷新目录',
    })
  })
}
//登出
function logout() {
  clearCache();
  filesStore.clear();
  dirStore.clear();
  router.push({ path: '/login' })
}
function onBack() {
  router.push({ path: '/article' })
}
</script>
<style scoped>
.header {
  background-color: #ccdcf1;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.delete {
  background-color: #c68121;
  color: #fff;
}
</style>